<template>
	<div class="container">
		<div>
			<el-button type="primary" @click="addClues">导入Excel</el-button>
			<el-button type="success" @click="uploadClues">导出Excel</el-button>
		</div>
		<!-- 导入线索的弹窗 -->
		<el-dialog v-model="dialogFormVisible" title="批量添加线索数据" width="400px" destroy-on-close>
			<el-form-item>
				<span>导入数据之前，<span class="writing-color"> 请参考下载模板 </span>文件中的模板</span>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="downloadTemplate">下载模板</el-button>
			</el-form-item>
			<el-form-item>
				<span>按照模板格式<span class="writing-color"> 批量导入数据 </span></span>
			</el-form-item>
			<el-form-item>
				<el-upload class="upload-demo" name="file" action="" ref="upload" :http-request="uploadSectionFile"
					:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
					:limit="1" :on-exceed="handleExceed" :on-error="uploadFileError" :on-success="uploadFileSuccess"
					:file-list="fileList">
					<!-- <el-button size="small" type="primary">点击上传</el-button> -->
					<el-button type="warning">导入数据</el-button>
					<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
				</el-upload>
			</el-form-item>
		
		
		</el-dialog>
		<div class="source">
			<el-input v-model.trim="customerName" @keyup.enter.native="toSource" placeholder="客户姓名" style="width: 120px;" class="btn"/>
			<el-input v-model.trim="idNumber" @keyup.enter.native="toSource" placeholder="身份证号" style="width: 150px;" class="btn" />
			<el-input v-model.trim="minAge" @keyup.enter.native="toSource" placeholder="最小年龄" style="width: 80px;" class="btn" />
			<el-input v-model.trim="maxAge" @keyup.enter.native="toSource" placeholder="最大年龄" style="width: 80px;" class="btn" />

			<el-select v-model.trim="education" placeholder="学历" style="width: 80px;" class="btn">
				<el-option v-for="(item,index) in educationList" :label="item" :value="item" />
			</el-select>

			<el-select v-model.trim="occupation" placeholder="职业" style="width: 80px;" class="btn">
				<el-option v-for="(item,index) in occupationList" :label="item" :value="item" />
			</el-select>

			<el-select v-model.trim="province" placeholder="省份" style="width: 80px;" class="btn">
				<el-option v-for="(item,index) in provinceList" :label="item" :value="item" />
			</el-select>

			<el-input v-model.trim="travelType" @keyup.enter.native="toSource" placeholder="旅游类型" style="width: 80px;" class="btn"/>

			<el-select v-model.trim="intentionalProductId" placeholder="意向产品" style="width: 100px;" class="btn">
				<el-option v-for="(item,index) in productList" :label="item.productName" :value="item.productId" />
			</el-select>

			<!-- <el-date-picker v-model.trim="createdTime" type="date" placeholder="创建时间" :size="size"
				style="width: 120px;" /> -->
			<el-input v-model.trim="clueSource" @keyup.enter.native="toSource" placeholder="线索来源" style="width: 80px;" class="btn"/>

			<el-select v-model.trim="success" placeholder="是否成交" style="width: 150px;" class="btn">
				<el-option label="未成交" value="0" />
				<el-option label="已成交" value="1" />
			</el-select>

			<el-select v-model.trim="clueStatus" placeholder="线索状态" style="width: 150px;" class="btn">
				<el-option label="未分配" value="0" />
				<el-option label="已分配" value="1" />
				<el-option label="已轮转" value="2" />
				<el-option label="无意向结束" value="3" />
			</el-select>

			<el-button type="primary" @click="toSource" class="btn">搜索</el-button>
			<el-button type="info" @click="toReset">重置</el-button>

		</div>
		<!-- 表格数据的显示 -->
		<div class="table">
			<el-table :data="conditionQueryClueList" style="width: 100%">
				<!-- 选项框 -->
				<!-- <el-table-column fixed type="selection" width="55" align="center" /> -->
				<!-- 序号 -->
				<el-table-column fixed label="序号" width="60" align="center">
					<template #default="scop">
						<span v-text="(this.current-1)*this.size +scop.$index +1" width="60"> </span>
					</template>
				</el-table-column>
				<el-table-column fixed prop="customerName" label="客户姓名" width="120" align="center" />
				<el-table-column prop="idNumber" label="身份证号" width="120" align="center" />
				<el-table-column prop="gender" label="性别" width="120" align="center">
					<template #default="scop">
						<span v-if="scop.row.gender == 1">男</span>
						<span v-else>女</span>
					</template>
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="120" align="center" />
				<el-table-column prop="education" label="学历" width="120" align="center" />
				<el-table-column prop="occupation" label="职业" width="120" align="center" />
				<el-table-column prop="province" label="省份" width="120" align="center" />
				<el-table-column prop="contactNumber" label="联系电话" width="120" align="center" />
				<el-table-column prop="clueTrackingEntity.salespersonEntity.salespersonName" label="负责人" width="120" align="center">
				</el-table-column>
				<el-table-column prop="travelProductEntity.productName" label="意向产品" width="120" align="center" />
				<el-table-column prop="travelType" label="旅游类型" width="120" align="center" />
				<el-table-column prop="createdTime" label="创建时间" width="100" align="center" />
				<el-table-column prop="clueSource" label="线索来源" width="120" align="center" />
				<el-table-column prop="success" label="是否成交" align="center">
					<template #default="scop">
						<span v-if="scop.row.success == 0">未成交</span>
						<span v-else>已成交</span>
					</template>
				</el-table-column>
				<el-table-column prop="clueStatus" label="线索状态" align="center">
					<template #default="scop">
						<span v-if="scop.row.clueStatus == 0">未分配</span>
						<span v-else-if="scop.row.clueStatus == 1">已分配</span>
						<span v-else-if="scop.row.clueStatus == 2">已轮转</span>
						<span v-else>无意向结束</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="是否删除" align="center">
					<template #default="scop">
						<span v-if="scop.row.status == 0">未删除</span>
						<span v-else>已删除</span>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="220">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="clueDetail(scope.$index, scope.row)">线索详情</el-button>
						<el-button link type="primary" size="small" @click="clueTrackingRecording(scope.$index, scope.row)">跟踪记录</el-button>
						<el-button link type="primary" size="small" @click="clueRotation(scope.$index, scope.row)">轮转记录</el-button>
					</template>
				</el-table-column>
			</el-table>
			<br />
			<!-- 销售人员 ： 分页按钮 -->
			<el-button v-if="current == 1" type="info" disabled class="btn">上一页</el-button>
			<el-button v-else type="primary" @click="toPrevious" class="btn">上一页</el-button>
			<span class="btn">{{current}}</span>

			<el-button v-if="current == pages" type="info" disabled class="btn">下一页</el-button>
			<el-button v-else type="primary" @click="toNext" class="btn">下一页</el-button>

			<span class="btn">总记录数：{{total}}</span>
			<span class="btn">总页数：{{pages}}</span>
			
			<span>跳转到：</span>
			<el-input v-model.trim="current" @keyup.enter.native="toSource" style="width: 50px;" class="btn"/>
			<span>页</span>

			<!-- 线索详情的弹窗 -->
			<el-drawer v-model="clueVisible" :show-close="false">
				<template #header="{ close, titleId, titleClass }">
					<h4 :id="titleId" :class="titleClass">线索详情</h4>
				</template>
				<template #footer>
					<el-button type="danger" @click="close(1)">关闭</el-button>
				</template>
				<!-- 内容 -->
				<el-descriptions class="margin-top" :column="1" :size="size" border>
					<el-descriptions-item label="客户姓名">
					{{clueInfo.customerName}}
					</el-descriptions-item>
					<el-descriptions-item label="身份证号">
						{{clueInfo.idNumber}}
					</el-descriptions-item>
					<el-descriptions-item label="性别">
						<span v-if="clueInfo.gender == 1">男</span>
						<span v-else>女</span>
					</el-descriptions-item>
					<el-descriptions-item label="年龄">
						{{clueInfo.age}}
					</el-descriptions-item>
					<el-descriptions-item label="学历">
						{{clueInfo.education}}
					</el-descriptions-item>
					<el-descriptions-item label="职业">
						{{clueInfo.occupation}}
					</el-descriptions-item>
					<el-descriptions-item label="省份">
						{{clueInfo.province}}
					</el-descriptions-item>
					<el-descriptions-item label="城市">
						{{clueInfo.city}}
					</el-descriptions-item>
					<el-descriptions-item label="联系电话">
						{{clueInfo.contactNumber}}
					</el-descriptions-item>
					<el-descriptions-item label="负责人">
						{{clueInfo.clueTrackingEntity.salespersonEntity.salespersonName}}
					</el-descriptions-item>
					<el-descriptions-item label="邮箱">
						{{clueInfo.email}}
					</el-descriptions-item>
					<el-descriptions-item label="旅游人数">
						{{clueInfo.travelersCount}}
					</el-descriptions-item>
					<el-descriptions-item label="出行类型">
						{{clueInfo.travelType}}
					</el-descriptions-item>
					<el-descriptions-item label="意向产品">
						{{clueInfo.travelProductEntity.productName}}
					</el-descriptions-item>
					<el-descriptions-item label="创建时间">
						{{clueInfo.createdTime}}
					</el-descriptions-item>
					<el-descriptions-item label="线索来源">
						{{clueInfo.clueSource}}
					</el-descriptions-item>
					<el-descriptions-item label="是否成交">
						<span v-if="clueInfo.success == 0">未成交</span>
						<span v-else>已成交</span>
					</el-descriptions-item>
					<el-descriptions-item label="线索状态">
						<span v-if="clueInfo.clueStatus == 0">未分配</span>
						<span v-else-if="clueInfo.clueStatus == 1">已分配</span>
						<span v-else-if="clueInfo.clueStatus == 2">已轮转</span>
						<span v-else>无意向结束</span>
					</el-descriptions-item>
					<el-descriptions-item label="是否删除">
						<span v-if="clueInfo.status == 0">未删除</span>
						<span v-else>已删除</span>
					</el-descriptions-item>
					<el-descriptions-item label="备注">
						{{clueInfo.note}}
					</el-descriptions-item>
				</el-descriptions>
			</el-drawer>

			<!-- 线索跟踪记录的弹窗 -->
			<el-drawer v-model="clueTrackingVisible" :show-close="false" size="1000px">
				<template #header="{ close, titleId, titleClass }">
					<h4 :id="titleId" :class="titleClass">线索跟踪记录</h4>
				</template>
				<template #footer>
					<el-button type="danger" @click="close(2)">关闭</el-button>
				</template>
				<!-- 表格内容 -->
				<el-table :data="clueTracking" style="width: 100%">
					<el-table-column fixed label="序号" width="60" align="center">
						<template #default="scop">
							<span v-text="scop.$index +1" width="60"> </span>
						</template>
					</el-table-column>
				    <el-table-column fixed prop="cluesEntity.customerName" label="客户名称" width="100" align="center" />
				    <el-table-column fixed prop="salespersonEntity.salespersonName" label="销售员" width="100" />
					<el-table-column prop="startTime" label="开始时间" width="220" />
					<el-table-column prop="followupTime" label="跟进时间" width="220" />
					<el-table-column prop="followupDuration" label="跟进时长(分钟)" width="150" />
					<el-table-column prop="followupMethod" label="跟进方式" width="100" />
					<el-table-column prop="trackingRecord" label="跟踪情况记录" width="220" />
					<el-table-column prop="intentLevel" label="意向程度" width="100">
						<template #default="scop">
							<span v-if="scop.row.intentLevel == 0">无意向</span>
							<span v-else-if="scop.row.intentLevel == 1">一般</span>
							<span v-else-if="scop.row.intentLevel == 2">有意向</span>
							<span v-else>未确定</span>
						</template>
					</el-table-column>
					<el-table-column prop="trackingStatus" label="跟踪状态" width="100">
						<template #default="scop">
							<span v-if="scop.row.trackingStatus == 0">未处理</span>
							<span v-else-if="scop.row.trackingStatus == 1">已联系</span>
							<span v-else-if="scop.row.trackingStatus == 2">已放弃</span>
							<span v-else-if="scop.row.trackingStatus == 3">已成交</span>
							<span v-else>已轮转</span>
						</template>
					</el-table-column>
					<el-table-column prop="note" label="备注" width="500" />
				  </el-table>
			</el-drawer>

			<!-- 线索轮转记录的详情 -->
			<el-dialog v-model="clueRotationVisible" :show-close="false" width="320px">
			<!-- <el-drawer v-model="clueRotationVisible" :show-close="false"> -->
				<template #header="{ close, titleId, titleClass }">
					<h4 :id="titleId" :class="titleClass">线索轮转记录</h4>
				</template>
				<template #footer>
					<el-button type="danger" @click="close(3)">关闭</el-button>
				</template>
				<!-- 内容 -->
				<el-descriptions class="margin-top" column="1" :size="size" border>
					<el-descriptions-item label="线索名称" align="center">
						{{clueRotationRecord.clueEntity.customerName}}
					</el-descriptions-item>
					<el-descriptions-item label="负责人" align="center">
						{{clueRotationRecord.salespersonEntity.salespersonName}}
					</el-descriptions-item>
					<el-descriptions-item label="创建人" align="center">
						{{clueRotationRecord.creatorEntity.salespersonName}}
					</el-descriptions-item>
					<el-descriptions-item label="轮转原因" align="center">
						{{clueRotationRecord.rotationReason}}
					</el-descriptions-item>
					<el-descriptions-item label="备注" align="center">
						{{clueRotationRecord.note}}
					</el-descriptions-item>
				</el-descriptions>
			<!-- </el-drawer> -->
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'clueInfo',
		components: {

		},
		data() {
			return {
				// 学历
				educationList: [
					"初中", "高中", "专科", "本科", "硕士", "博士", "其他"
				],
				// 职业
				occupationList: [
					"互联网/AI", "电子/电气/通信", "产品", "运营/客服", "销售",
					"人力/行政/法务", "财务/审计/税务", "生成制作", "生活服务/零售",
					"餐饮", "酒店/旅游", "教育培训", "设计", "房地产/建筑", "影视/传媒",
					"市场/公关/广告", "物流/仓储/司机", "采购/贸易", "汽车", "医疗健康",
					"金融", "咨询/翻译/法律", "能源/环保/农业", "高级管理", "其他"
				],
				// 省份信息
				provinceList: [
					"河北", "山西", "吉林", "辽宁", "黑龙江", "陕西", "甘肃", "青海",
					"山东", "福建", "浙江", "河南", "湖北", "湖南", "江西", "江苏", "安徽",
					"广东", "海南", "四川", "贵州", "云南", "台湾", "北京", "上海", "天津",
					"重庆", "内蒙古自治区", "新疆维吾尔自治区", "宁夏回族自治区", "广西壮族自治区",
					"新疆自治区", "香港特别行政区", "澳门特别行政区"
				],
				productList: [], // 意向产品
				customerName: "", // 客户姓名
				idNumber: "", // 身份证号
				minAge: "", // 最小年龄
				maxAge: "", // 最小年龄
				education: "", // 学历
				occupation: "", // 职业
				province: "", // 省份
				travelType: "", // 出行类型
				intentionalProductId: "", // 意向产品
				createdTime: "", // 创建时间
				clueSource: "", // 线索来源
				success: "", // 是否成交
				clueStatus: "", // 线索状态

				conditionQueryClueList: [], // 查询出来的线索数据；

				productList: [], // 产品信息

				current: 1, // 当前页
				total: 0, // 总记录数
				size: 0, // 当页总记录数
				pages: 0, // 总页数

				clueVisible: false,
				clueTrackingVisible: false,
				clueRotationVisible: false,
				
				clueInfo: {}, // 线索详情
				clueTracking: [], // 线索跟踪记录
				clueRotationRecord: {}, // 线索轮转详情
				clueId: '', // 线索ID
				dialogFormVisible: false,
			}
		},
		// 声明方法
		methods: {
			// 获取所有产品的信息
			getAllProductName() {
				this.$axios({
					url: "clue/travelProduct/selectAllProduct",
					method: "post"
				}).then(res => {
					this.productList = res.data;
				});
			},
			// 线索信息的多条件查询
			toSource() {
				// this.createdTime = this.formatDate(this.createdTime);
				this.$axios({
					url: 'clue/customerClue/selectAllClueList',
					method: 'post',
					params: {
						currentPage: this.current,
						customerName: this.customerName,
						idNumber: this.idNumber,
						minAge: this.minAge,
						maxAge: this.maxAge,
						education: this.education,
						occupation: this.occupation,
						province: this.province,
						travelType: this.travelType,
						productId: this.intentionalProductId,
						// createdTime: this.createdTime,
						clueSource: this.clueSource,
						success: this.success,
						clueStatus: this.clueStatus,
					},
				}).then(res => {
					this.conditionQueryClueList = res.data.list;
					this.total = res.data.total;
					this.size = res.data.size;
					this.pages = res.data.pages;
				})
			},
			// 重置
			toReset() {
				this.customerName = "";
				this.idNumber = "";
				this.minAge = "";
				this.maxAge = "";
				this.education = "";
				this.occupation = "";
				this.province = "";
				this.travelType = "";
				this.intentionalProductId = "";
				this.createdTime = "";
				this.clueSource = "";
				this.success = "";
				this.clueStatus = "";
				this.current = 1;
			},
			// 上一页
			toPrevious() {
				this.current--;
				this.toSource();
			},
			// 下一页
			toNext() {
				this.current++;
				this.toSource();
			},
			// 查询线索线索详情
			clueDetail(index,row) {
				this.clueId = row.clueId;
				this.$axios({
					url: '/clue/customerClue/selectlatestTrackingClue',
					method: 'post',
					params: {
						clueId: this.clueId,
					},
				}).then(res => {
					this.clueInfo = res.data;
					this.clueVisible = true;
				})
			},
			// 查询线索跟踪记录
			clueTrackingRecording(index,row) {
				this.clueId = row.clueId;	
				this.$axios({
					url: '/clue/clueTracking/selectAllClueTracking',
					method: 'post',
					params: {
						clueId: this.clueId,
					},
				}).then(res => {
					if(res.data == "") {
						// 没有跟踪记录
						ElMessage({
						    showClose: true,
						    message: '没有跟踪记录',
						    type: 'warning',
						  })
						return;
					}
					this.clueTracking = res.data;
					this.clueTrackingVisible = true;
				})
			},
			// 查询线索的轮转记录
			clueRotation(index,row) {
				this.clueId = row.clueId;
				this.$axios({
					url: '/clue/clueRotataion/selectCluetationRecording',
					method: 'post',
					params: {
						clueId: this.clueId,
					},
				}).then(res => {
					if(res.data == "") {
						// 没有轮转记录
						ElMessage({
						    showClose: true,
						    message: '没有轮转记录',
						    type: 'warning',
						  })
						return;
					}
					this.clueRotationVisible = true;
					this.clueRotationRecord = res.data;
				})
			},
			// 关闭抽屉
			close(index) {
				if(index == 1) {
					this.clueVisible = false;
				} else if(index == 2) {
					this.clueTrackingVisible = false;
				} else {
					this.clueRotationVisible = false;
				}
			},
			// 开始批量导入数据的弹窗
			addClues() {
				this.dialogFormVisible = true;
			},
			// 下载模板按钮；
			downloadTemplate() {
				// alert("正在下载模板");
				window.location.href = "http://localhost:6060/clue/template/upload";
			},
			//自定义上传
			uploadSectionFile(param) {
				var fileObj = param.file;
				var form = new FormData();
				// 文件对象
				form.append("file", fileObj);
				this.$axios.post('http://localhost:6060/clue/excel/mutipartFile', form).then(res => {
					if (res.data == true) {
						this.dialogFormVisible = false;
						ElMessage({
							message: '数据导入成功！',
							type: 'success',
						})
					} else {
						this.dialogFormVisible = false;
						this.fileList = [];
						ElMessage.error('数据导入失败！');
					}
			
				}).catch(({
					err
				}) => {
					this.dialogFormVisible = false;
					this.fileList = [];
					ElMessage.error('数据导入失败！')
				})
			},
			// 导出线索文件
			uploadClues() {
				// 1. 写入数据
				// alert("正在写数据")
				this.$axios({
					url: 'clue/excel/writeData',
					method: 'post',
					params: {
						customerName:this.customerName,
						idNumber:this.idNumber,
						minAge:this.minAge,
						maxAge:this.maxAge,
						education:this.education,
						occupation:this.occupation,
						province:this.province,
						travelType:this.travelType,
						intentionalProductId:this.intentionalProductId,
						clueSource:this.clueSource,
						success:this.success,
						clueStatus:this.clueStatus,
					}
				}).then(res => {
					if(res.data == true) {
						// 2. 导出Excel文件
						window.location.href = "http://localhost:6060/clue/excel/upload";
					} else {
						// alert("无数据，无法实现数据的导出");
						ElMessage({
						    message: '无数据，无法实现数据的导出',
						    type: 'warning',
						  })
						
					}
				}).err(error => {
					// alert("写入数据失败，无法实现数据的导入");
					ElMessage.error('写入数据失败，无法实现数据的导入');
				});
			},
		},
		created() {
			// 获取产品信息
			this.getAllProductName();

			// 查询线索信息
			this.toSource();
		}
	}
</script>

<style scoped>
	.btn {
		margin: 10px 5px;
	}
	.writing-color {
		color: red;
	}
</style>